<template>
  <div class="screeBox" :style="{transform:'scale('+scaleNum+')','transform-origin':'0px 0px'}">
    <div class="screen_top">
      <div class="logo">
       <span class="imgBox" @click="goChooseBoard" v-focusable>
            <img src="~images/bigScreen/collectScreen/title.png"/>
       </span>
      </div>
      <span v-if="isChina" class="text" :class="{'textUS': isChina !== 'zh_CN'}">{{logoTitle}}</span>
      <div class="timeBox">
        <span class="time_text">{{timeText}}</span>
        <span class="time_imgBox" @click="chinaClick" v-focusable>
         <template v-if="isChina === 'zh_CN'"><img src="~images/bigScreen/collectScreen/enlish.png"/></template>
         <template v-else><img src="~images/bigScreen/collectScreen/china.png"/></template>
       </span>
      </div>
    </div>
    <div class="screen_main">
         <swiper :options="swiperOption" ref="mySwiper">
            <template v-for="item in dataList">
              <swiper-slide :key="item.lineName">
                <andoNcollectScreenList :dataList="item" :isChina="isChina"/>
              </swiper-slide>
            </template>
         </swiper>
    </div>
  </div>
</template>

<script>
import andoNcollectScreenList from "@/components/andoNcollectScreenList";
import { swiper,swiperSlide } from 'vue-awesome-swiper'

import peopleGray from '@/assets/images/bigScreen/collectScreen/peopleGray.png'
import peopleRed from '@/assets/images/bigScreen/collectScreen/peopleRed.png'
import peopleYellow from '@/assets/images/bigScreen/collectScreen/peopleYellow.png'

import equipmentGray from '@/assets/images/bigScreen/collectScreen/equipmentGray.png'
import equipmentYellow from '@/assets/images/bigScreen/collectScreen/equipmentYellow.png'
import equipmentRed from '@/assets/images/bigScreen/collectScreen/equipmentRed.png'

import materialGray from '@/assets/images/bigScreen/collectScreen/materialGray.png'
import materialRed from '@/assets/images/bigScreen/collectScreen/materialRed.png'
import materialYellow from '@/assets/images/bigScreen/collectScreen/materialYellow.png'

import qualityGray from '@/assets/images/bigScreen/collectScreen/qualityGray.png'
import qualityRed from '@/assets/images/bigScreen/collectScreen/qualityRed.png'
import qualityYellow from '@/assets/images/bigScreen/collectScreen/qualityYellow.png'

import otherGray from '@/assets/images/bigScreen/collectScreen/otherGray.png'
import otherRed from '@/assets/images/bigScreen/collectScreen/otherRed.png'
import otherYellow from '@/assets/images/bigScreen/collectScreen/otherYellow.png'

import 'swiper/dist/css/swiper.css'
export default {
  name: "andonScreen",
  components:{andoNcollectScreenList,swiper,swiperSlide},
  // computed:{
  //   swiper(){
  //     return this.$refs.mySwiper.swiper
  //   }
  // },
  data(){
    return{
      swiperOption: {
        loop:false,
        speed:15000,
        autoplay : {
          delay:3000
        },
        slidesPerView: 4,
        preventClicksPropagation: true,
        simulateTouch: false
      },
      chartData:{},
      carouselValue:0,
      componentKey:0,
      logoTitle:"",
      isChina:'',
      tarGettime:"",
      dataList:[],
      showList:false,
      scaleNum:'',
      timeText:"",
      timeIDmain:null,
      timeID:null,
      createTimeId:null
    }
  },
  // activated() {
  //   if (this.$refs.mySwiper){
  //     this.swiper.refresh()
  //   }
  // },
  beforeDestroy(){
    localStorage.setItem('language', 'zh_CN')
    this.$i18n.locale = 'zh_CN'
    clearInterval(this.createTimeId)
    clearInterval(this.timeID)
    // clearInterval(this.timeIDmain)
  },
  mounted(){
    this.isChina = localStorage.getItem('language')
    this.onresize()
    window.addEventListener('resize', this.onresize, false);
    let queryInfo = this.$route.query
    if (queryInfo && queryInfo.hierarchyCode) {
      this.getDataList(queryInfo.hierarchyCode)
      this.timeID = setInterval(()=>{
        this.getDataList(queryInfo.hierarchyCode)
      },5000)
    }
    this.getTitle()
  },
  methods:{
    refreshTime(){
      this.tarGettime += 1000
      const date = new Date(this.tarGettime)
      this.timeText = this.$moment(date).format('HH:mm:ss | YYYY/MM/DD');
    },
    getTitle(){
      if (this.createTimeId){
        clearInterval(this.createTimeId)
      }
      this.axios({
        method: 'post',
        url: '/dms/large/screen/detail',
        data: {
          url: this.$router.history.current.fullPath
        }
      }).then(res => {
        if (res.code === 200) {
          if (res.data.dateTime){
            this.tarGettime = new Date(res.data.dateTime).getTime()
            this.createTimeId = setInterval(this.refreshTime, 1000);
          }
          this.$nextTick(()=>{
            if (this.isChina === 'zh_CN'){
              this.logoTitle = res.data.titleCN
            }else {
              this.logoTitle = res.data.titleEN
            }
          })
        }
      })
    },
    goChooseBoard(){
      this.$router.push({ path: '/chooseBoard'})
    },

    getDataList(orgCode){
      this.showList = false
      this.axios({
        method: 'get',
        url: '/dms/andonTask/dashboard',
        params:{
          orgCode
        }
      }).then(res => {
        if (res.code == 200) {
          if (res.data){
               res.data.forEach(item=>{
                 if (item.dashboardDetailList && item.dashboardDetailList.length){
                   item.dashboardDetailList.forEach(val=>{
                     if (Number(val['level']) > 1){
                       switch (val['issueType']) {
                         case "人为问题":
                           val['redImg']= peopleRed
                           break;
                         case "物料问题":
                           val['redImg'] = materialRed
                           break;
                         case "质量问题":
                           val['redImg'] = qualityRed
                           break;
                         case "其他问题":
                           val['redImg'] = otherRed
                           break;
                         case "设备问题":
                           val['redImg'] = equipmentRed
                           break;
                       }
                       return
                     }
                     switch (Number(val['andonStatus'])) {
                       case 0:
                         switch (val['issueType']) {
                           case "人为问题":
                             val['grayImg']= peopleGray
                             break;
                           case "物料问题":
                             val['grayImg'] = materialGray
                             break;
                           case "质量问题":
                             val['grayImg'] = qualityGray
                             break;
                           case "其他问题":
                             val['grayImg'] = otherGray
                             break;
                           case "设备问题":
                             val['grayImg'] = equipmentGray
                             break;
                         }
                         break;
                       case 1:
                         switch (val['issueType']) {
                           case "人为问题":
                             val['yellowImg'] = peopleYellow
                             break;
                           case "物料问题":
                             val['yellowImg'] = materialYellow
                             break;
                           case "质量问题":
                             val['yellowImg'] = qualityYellow
                             break;
                           case "其他问题":
                             val['yellowImg'] = otherYellow
                             break;
                           case "设备问题":
                             val['yellowImg'] = equipmentYellow
                             break;
                         }
                         break;
                     }
                   })
                 }
               })
             this.dataList = res.data
            let _this = this
            if (this.dataList && this.dataList.length){
              this.$refs.mySwiper.$el.onmouseover = function(){
                _this.$refs.mySwiper.swiper.autoplay.stop();
              }
              this.$refs.mySwiper.$el.onmouseout = function(){
                _this.$refs.mySwiper.swiper.autoplay.start();
              }
            }
          }
        } else {
          this.$Message.error(({ content: res.msg, duration: 6, closable: true }));
        }
        this.showList = true
      })
    },
    chinaClick(){
      if (this.isChina === 'zh_CN'){
        this.isChina = 'en_US'
      }else {
        this.isChina = 'zh_CN'
      }
      this.$i18n.locale = this.isChina
      localStorage.setItem('language', this.isChina)
      this.getTitle()
      // this.componentKey += 1
    },
    //计算缩放
    onresize(){
      const Width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      const Height = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;
      const scaleW = Width < 1920 ? (Width /  1920) : 1;
      const scaleH = Height < 1080 ? (Height / 1080) : 1;
      this.scaleNum = scaleW > scaleH ? scaleH : scaleW
    },
  }
}
</script>

<style scoped lang="scss">
@import "./styles/andon.scss";
</style>
